<script setup>
const route = useRoute();
const { activityId } = route.params;
const activityData = ref({});
const { data } = await getFetchData({
  url: "/portal/getActivityInfoById",
  opts: {
    id: activityId,
  },
});
activityData.value = data;
activityData.value.activityContentText =
  activityData.value.activityContentText.replace(
    /\<img/gi,
    '<img style="max-width:100%;height:auto;display:block;"'
  );
</script>

<template>
  <div class="top">
    <div class="acritle-header">
      <span>{{ activityData.activityTitle }}</span>
    </div>
    <div class="content mr-b-80">
      <div class="content-img">
        <img :src="activityData.activityCoverUrl" alt="" />
      </div>
      <div class="tit">{{ activityData.activityTitle }}</div>
      <div class="icon-img">
        <img src="@/assets/images/time.png" alt="" />
        <span>{{ activityData.startActivityTime }}</span>
      </div>
      <div class="icon-img">
        <img src="@/assets/images/address.png" alt="" /><span>{{
          activityData.activityAddress
        }}</span>
      </div>
      <div class="line"></div>
      <div class="detail">
        <div
          v-if="activityData.activityContentText"
          v-dompurify-html="activityData.activityContentText"
        ></div>
        <div v-else style="text-align: center">暂无数据!</div>
      </div>
    </div>
  </div>
</template>
<style scoped>
.top {
  color: rgba(16, 16, 16);
  margin-top: 5.167vw;
}
.acritle-header {
  height: 4.01vw;
  line-height: 4.01vw;
  font-size: 1.042vw;
  border-bottom: 0.052vw solid rgba(228, 228, 228);
  padding-left: 22.083vw;
}
.content {
  width: 54.896vw;
  padding-left: 22.083vw;
}
.content-img img {
  max-width: 100%;
  width: 100%;
  margin: 1.042vw 0;
}
.icon-img {
  font-size: 0.938vw;
  color: #898989;
  margin-bottom: 0.521vw;
  display: flex;
  align-items: center;
}
.icon-img img {
  width: 1.25vw;
  margin-right: 0.521vw;
}
.tit {
  font-size: 1.458vw;
  margin-bottom: 0.729vw;
}
.line {
  border-top: 0.1vw solid #ccc;
  margin: 1.563vw 0 2.344vw 0;
}
.detail {
  font-size: 0.833vw;
  color: #898989;
  line-height: 2;
  text-align: justify;
}
@media (max-width: 768px) {
  .acritle-header {
    padding-bottom: 3.067vw;
    padding-left: 5%;
    font-size: 2.667vw;
  }
  .top {
    margin-top: 18vw;
  }
  .content {
    width: 90%;
    margin: 0 auto;
    padding: 0;
  }
  .content-img img {
    margin: 2vw 0;
  }
  .tit {
    font-size: 3.733vw;
  }
  .icon-img {
    font-size: 2.133vw;
  }
  .icon-img img {
    width: 3.2vw;
  }
  .detail {
    font-size: 2.133vw;
  }
}
</style>
